<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="quotation">
			<view class="quotation_top">
				<view class="top">
					<view class="left" @click="coinShow">
						<image class="menu" src="../../static/contract/menu.png" mode=""></image>
						<text>{{ title }}</text>
						<image class="forever" src="../../static/contract/for.png" mode=""></image>
					</view>
					<view class="right">
						<image @click="goKline()" class="kline" src="../../static/contract/k_line.png" mode="aspectFit"></image>
						<image @click="showGo = true" class="three" src="../../static/contract/3.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="bom">
					<view>
						<text class="aa">0.00000000</text>
						<text>总资产</text>
					</view>
					<view>
						<text class="aa">0.00000000</text>
						<text>可用</text>
					</view>
					<view>
						<text class="aa">0.00000000</text>
						<text>已用</text>
					</view>
					<view>
						<text class="aa">0.00000000</text>
						<text>冻结</text>
					</view>
					<uni-icons @click="isTab = !isTab" type="arrowdown" :color="'#A4A4A4'" size="16"></uni-icons>
				</view>
				<view class="bom" v-show="isTab">
					<view>
						<text>0.00000000</text>
						<text>已实现盈亏</text>
					</view>
					<view>
						<text>0.00000000</text>
						<text>未实现盈亏</text>
					</view>
					<view>
						<text>逐仓</text>
						<text>账户模式</text>
					</view>
				</view>
			</view>
			<view class="b_line"></view>
			<!-- <view class="quotation_NavBar">
        <view class="back" @click="back()">
		 <uni-icons type="back" :color="'#fff'" style="margin-left: -40upx;"></uni-icons>
        </view>
        <view class="select_coin">
          <view class="select_coin_main" @click="showSelect = true">
            <text>{{ title }}</text>
            <uni-icons type="arrowdown" :size="12" :color="'#488fd3'"></uni-icons>
          </view>
        </view>
        <view class="quotation_kline" @click="goKline()">
          <text style="font-size: 22upx;;">K线</text>
          <text class="iconfont">&#xe62a;</text>
        </view>
      </view> -->
			<view class="quotation_nav" v-show="!isTab">
				<view :class="type == 'BUY' ? 'active' : ''" @click="setType('BUY')">开仓</view>
				<view :class="type == 'SELL' ? 'active' : ''" @click="setType('SELL')">平仓</view>
				<view :class="type == 'CURRENT' ? 'active' : ''" @click="setType('CURRENT')">持仓</view>
			</view>
			<template v-if="type == 'BUY' || type == 'SELL'">
				<view class="quotation_pan">
					<view class="quotation_pan_main clear">
						<view class="pan_left max_min_buy">
							<view class="selopen" v-if="type == 'BUY'">
								<view class="open open1" :class="mnull == 'more' ? 'more' : ''" @click="setOpen('more')">开多</view>
								<view class="open open2" :class="mnull == 'null' ? 'null' : ''" @click="setOpen('null')">开空</view>
							</view>
							<view class="selopen" v-if="type == 'SELL'">
								<view class="open open1" :class="mnull == 'more' ? 'more' : ''" @click="setOpen('more')">平多</view>
								<view class="open open2" :class="mnull == 'null' ? 'null' : ''" @click="setOpen('null')">平空</view>
							</view>
							<view class="s_entrust">
								<view class="lever">
									<picker @change="set1" :value="levers" :range="leverList">
										<view class="flex">
											<view class="uni-inputs">{{ leverList[levers] }}</view>
											<view class="triangle"></view>
										</view>
									</picker>
									<image src="../../static/contract/thr.png" mode=""></image>
								</view>
								<view class="lever">
									<picker @change="set2" :value="leverss" :range="leverLists">
										<view class="flex">
											<view class="uni-inputs">
												<text style="color: #A3A3A3;">杠杆:</text>
												<text>{{ leverLists[leverss] }}</text>
											</view>
											<view class="triangle"></view>
										</view>
									</picker>

									<image src="../../static/contract/thr.png" mode=""></image>
								</view>
							</view>
							<view class="pan_buy_sell">
								<template v-if="levers == 0">
									<view class="item clear">
										<input class="input" v-model="price" :maxlength="priceMaxLength" type="digit" placeholder="价格" />
										<text class="coin">
											<text style="color: #000;">{{ opone }}</text>
											<text style="text-align: right;">{{ coin }}</text>
										</text>
									</view>
									<view class="p_sel">
										<view :class="optype == 'opponent' ? 'active' : ''" @click="opType('opponent')">对手价</view>
										<view :class="optype == 'bone' ? 'active' : ''" @click="opType('bone')">买一价</view>
										<view :class="optype == 'sone' ? 'active' : ''" @click="opType('sone')">卖一价</view>
									</view>
									<view class="numb">
										<input type="text" v-model="number" value="" placeholder="数量" />
										<text>张</text>
									</view>
								</template>
								<template v-if="levers == 2">
									<view class="numc" style="margin-top: 26rpx;">
										<input type="text" v-model="number" value="" placeholder="触发价格" />
										<text>USDT</text>
									</view>
									<view class="numc">
										<input type="text" v-model="number" value="" placeholder="价格" />
										<text>USDT</text>
									</view>
									<view class="numc">
										<input type="text" v-model="number" value="" placeholder="数量" />
										<text>张</text>
									</view>
								</template>

								<view style="margin-top: 26rpx;">
									<slider style="margin: 0;" block-size="16" activeColor="#488FD3" block-color="#BFBFBF" value="0" @change="sliderChange" step="25" />
								</view>
								<view class="percentage">
									<text class="l" :class="step == '0' ? 'active' : ''">0%</text>
									<text class="l" :class="step == '25' ? 'active' : ''">25%</text>
									<text class="c" :class="step == '50' ? 'active' : ''">50%</text>
									<text class="r" :class="step == '75' ? 'active' : ''">75%</text>
									<text class="r" :class="step == '100' ? 'active' : ''">100%</text>
								</view>
								<template v-if="type == 'BUY'">
									<view class="max_min clear">
										<text class="fl">占用保证金</text>
										<text class="fr">0</text>
									</view>
									<view class="max_min clear">
										<text class="fl">可开张数</text>
										<text class="fr"><1</text>
									</view>
								</template>
								<template v-if="type == 'SELL'">
									<view class="max_min clear" style="margin: 42rpx 0 22rpx;">
										<text class="fl">可平张数</text>
										<text class="fr"><1</text>
									</view>
								</template>
								<view class="submits">
									<template v-if="isLogin">
										<template v-if="type == 'BUY'">
											<button v-if="mnull == 'more'" class="buy" @click="buySell('BUY', false)">买入开多</button>
											<text v-if="mnull == 'more'" class="g_wz">看涨</text>
											<button v-if="mnull == 'null'" class="sell" @click="buySell('SELL', false)">买入开空</button>
											<text v-if="mnull == 'null'" class="g_wz">看跌</text>
										</template>
										<template v-if="type == 'SELL'">
											<button v-if="mnull == 'more'" class="buy" @click="buySell('BUY', false)">卖出平多</button>
											<text v-if="mnull == 'more'" class="g_wz">看跌</text>
											<button v-if="mnull == 'null'" class="sell" @click="buySell('SELL', false)">买入平空</button>
											<text v-if="mnull == 'null'" class="g_wz">看涨</text>
										</template>
									</template>
									<template v-else>
										<template v-if="type == 'BUY'">
											<button v-if="mnull == 'more'" class="buy" @click="$api.goLogin('../../login/login')">买入开多</button>
											<text v-if="mnull == 'more'" class="g_wz">看涨</text>
											<button v-if="mnull == 'null'" class="sell" @click="$api.goLogin('../../login/login')">买入开空</button>
											<text v-if="mnull == 'null'" class="g_wz">看跌</text>
										</template>
										<template v-if="type == 'SELL'">
											<button v-if="mnull == 'more'" class="buy" @click="$api.goLogin('../../login/login')">卖出平多</button>
											<text v-if="mnull == 'more'" class="g_wz">看跌</text>
											<button v-if="mnull == 'null'" class="sell" @click="$api.goLogin('../../login/login')">买入平空</button>
											<text v-if="mnull == 'null'" class="g_wz">看涨</text>
										</template>
									</template>
								</view>
								<view class="tpis" v-if="!isLogin">请登录后进行买卖</view>
							</view>
						</view>
						<view class="pan_right">
							<view class="pan_top">
								<text>指数价</text>
								<text>￥7429.01</text>
							</view>
							<view class="p_r_title clear">
								<text class="fl">价格({{ coin }})</text>
								<text class="fr">数量({{ symbol }})</text>
							</view>
							<scroll-view :scroll-top="sellScrollTop" class="pan_sell_list" scroll-y :scroll-with-animation="true" :scroll-into-view="lastName">
								<view id="SELLLIST">
									<view class="item clear" v-if="sellList[0]" v-for="(item, index) in sellList" :key="index" @click="setPrice(item.price)">
										<text class="fl">{{ filter.fix(item.price, 6) }}</text>
										<text class="fr">{{ filter.fix(item.count, 6) }}</text>
										<text class="bg" :style="{ width: item.width }"></text>
									</view>
								</view>
							</scroll-view>
							<view class="average clear" @click="setPrice(average)">
								<text class="fl">{{ filter.fix(average, 6) }}</text>
								<text class="frr">
									<text style="font-size: 22upx;;">≈￥</text>
									{{
										filter.fix(
											average *
												(coin == 'USDT'
													? COINRMB.tether
													: coin == 'BTC'
													? COINRMB.bitcoin
													: coin == 'ETH'
													? COINRMB.ethereum
													: coin == 'DUSD'
													? COINRMB.digitalusd
													: 6.58),
											2
										)
									}}
								</text>
							</view>
							<scroll-view class="pan_buy_list" :scroll-top="buyScrollTop" scroll-y :scroll-with-animation="true">
								<view class="item clear" v-if="buyList[0]" v-for="(item, index) in buyList" :key="index" @click="setPrice(item.price)">
									<text class="fl">{{ filter.fix(item.price, 6) }}</text>
									<text class="fr">{{ filter.fix(item.count, 6) }}</text>
									<text class="bg" :style="{ width: item.width }"></text>
								</view>
							</scroll-view>
							<view class="deep">
								<text>深度1</text>
								<image src="../../static/contract/thr.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="quotation_pan_new">
						<view class="title">
							<view class="left" v-if="levers == 0">
								<view :class="entrust == 'nor' ? 'active' : ''" @click="enType('nor')">当前委托</view>
								<view :class="entrust == 'plan' ? 'active' : ''" @click="enType('plan')">历史委托</view>
							</view>
							<view class="left" v-if="levers == 2">
								<view :class="entrust == 'nor' ? 'active' : ''" @click="enType('nor')">普通委托</view>
								<view :class="entrust == 'plan' ? 'active' : ''" @click="enType('plan')">计划委托</view>
							</view>
							<view class="right" @click="$goPage('ensures/ensures')">
								<image src="../../static/contract/all.png" mode=""></image>
								<text>全部</text>
							</view>
						</view>
						<view class="n_list">
							<view class="n_block">
								<view class="top">
									<view class="left">
										<view class="buy">买入开多</view>
										<text class="wz">BTC/USDT 永续</text>
										<text class="time">02.25 14:00:00</text>
									</view>
									<view class="right">撤单</view>
								</view>
								<view class="btm">
									<view>
										<view class="one">
											<text class="gray">委托总量:</text>
											0 张
										</view>
										<text>
											<text class="gray">已成交量:</text>
											0 张
										</text>
									</view>
									<view class="right">
										<view class="one">
											<text class="gray">委托价格:</text>
											0 张
										</view>
										<text>
											<text class="gray">保证金:</text>
											0.00 USDT
										</text>
									</view>
								</view>
							</view>
							<view class="n_block">
								<view class="top">
									<view class="left">
										<view class="buy sell">卖出开空</view>
										<text class="wz">BTC/USDT 永续</text>
										<text class="time">02.25 14:00:00</text>
									</view>
									<view class="right">撤单</view>
								</view>
								<view class="btm">
										<view>
											<view class="one">
												<text class="gray">委托总量:</text>
												0 张
											</view>
											<text>
												<text class="gray">已成交量:</text>
												0 张
											</text>
										</view>
										<view class="right">
											<view class="one">
												<text class="gray">委托价格:</text>
												0 张
											</view>
											<text>
												<text class="gray">保证金:</text>
												0.00 USDT
											</text>
										</view>
									</view>
								</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="have">
					<view class="block">
						<view class="top">
							<view class="one">
								<text>BTC/USDT永续</text>
								<view class="more">多头 10.00X</view>
							</view>
							<view class="two">
								<view class="left">
									<view class="small">开仓价格（USDT）</view>
									<view class="big">9593.19</view>
									<view class="small">预估强评价（USDT）</view>
									<view class="big">9593.19</view>
								</view>
								<view class="right">
									<view class="small">收益（USDT）</view>
									<view class="big">0.0000</view>
									<view class="small" style="margin-top: 8rpx;">收益率</view>
									<view class="big">0.00%</view>
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="one">
								<view>
									<view class="small">未实现盈亏（USDT）</view>
									<view class="ssmall">0.0000</view>
									<view class="small">保证金（USDT）</view>
									<view class="ssmall">0.00%</view>
								</view>
								<view>
									<view class="small">持仓量（张）</view>
									<view class="ssmall">0.0000</view>
									<view class="small">保证金率</view>
									<view class="ssmall">0.00%</view>
								</view>
								<view>
									<view class="small">可平量（张）</view>
									<view class="ssmall">0.0000</view>
									<view class="small">维持保证金率</view>
									<view class="ssmall">0.00%</view>
								</view>
							</view>
							<view class="two">
								<view class="btn" @click="showlever(index)" :class="inde == index ? 'active' : ''" v-for="(item, index) in btnList" :key="index">{{ item }}</view>
							</view>
						</view>
						<view class="b_line"></view>
					</view>
				</view>
			</template>
			<uni-popup :show="showSelect" position="middle" :h5-top="true" mode="fixed" @hidePopup="hidePopup()">
				<view class="quotation_select">
					<!-- <view class="s_header">
            <view class="left">
              <uni-icons type="search" :color="'#03bcc0'"></uni-icons>
              <input type="text" placeholder="交易对查询" />
            </view>
            <button class="right">取消</button>
          </view> -->
					<view class="s_nav">
						<block v-for="(item, index) in cexchange" :key="index">
							<button :class="item.name == pairs ? 'active' : ''" @click="setCoin(item.name)">{{ item.name }}</button>
						</block>
					</view>
					<view class="s_list clear">
						<block v-for="(item, index) in coinList" :key="index">
							<view
								class="fl"
								@click="goPage(`/pages/exchange/quotation/quotation?type=${item.symbol}&title=${item.title}&coin=${item.assetCode1}&symbol=${item.assetCode2}`)"
							>
								<image class="icon-cion" :src="'../../../static/coin/' + item.assetCode2.toLowerCase() + '@2x.png'"></image>
								<text>{{ item.title }}</text>
							</view>
						</block>
						<uni-load-more color="#c5cfd5" v-if="!coinList[0]" status="noMore"></uni-load-more>
					</view>
				</view>
			</uni-popup>
		</view>
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages"></HMmessages>

		<!-- 输入资金密码 -->
		<Modal :title="'输入资金密码'" v-if="isPayPwd" @close="closeModal('isPayPwd')">
			<view class="common_model">
				<view class="common_form">
					<view class="item clear">
						<text class="fl">资金密码:</text>
						<view class="fr"><input type="password" v-model="payPwd" placeholder="请输入资金密码" /></view>
					</view>
				</view>
				<view class="common_btn">
					<button @click="closeModal('isPayPwd')">取消</button>
					<button class="active" @click="buySell(isPayPwd, true)">确定</button>
				</view>
			</view>
		</Modal>
		<!-- 币种列表 -->
		<Coin v-if="showCoin" :title="this.coin + '合约'" @close="closeModal('showCoin')">
			<view class="msg_model">
				<view class="c_block">
					<text>BTC/USDT永续</text>
					<text class="add">8075.60</text>
					<text class="add">+0.03%</text>
				</view>
				<view class="c_block">
					<text>BTC/USDT永续</text>
					<text class="reduce">8075.60</text>
					<text class="reduce">-0.03%</text>
				</view>
			</view>
		</Coin>
		<!-- 跳转列表 -->
		<Goto v-if="showGo" @close="closeModal('showGo')">
			<view class="go_model">
				<view class="goto">
					<image src="../../static/contract/go1_b.png" mode="aspectFit"></image>
					<text>资金划转</text>
				</view>
				<view class="goto" @click="goTo('contractSet/contractSet')">
					<image src="../../static/contract/go2_b.png" mode="aspectFit"></image>
					<text>合约设置</text>
				</view>
				<view class="goto" @click="goTo('contractCalculator/contractCalculator')">
					<image src="../../static/contract/go3_b.png" mode="aspectFit"></image>
					<text>计算器</text>
				</view>
				<view class="goto">
					<image src="../../static/contract/go4_b.png" mode="aspectFit"></image>
					<text>费率</text>
				</view>
				<view class="goto">
					<image src="../../static/contract/go5_b.png" mode="aspectFit"></image>
					<text>合约信息</text>
				</view>
				<view class="goto">
					<image src="../../static/contract/go6_b.png" mode="aspectFit"></image>
					<text>关于合约</text>
				</view>
			</view>
		</Goto>
		<uni-popup :show="isFlat" position="middle" :h5-top="true" mode="fixed" @hidePopup="hidePopup()">
			<view class="quotation_select">
				<view class="block">
					<view class="label">价格</view>
					<view class="m_input">
						<input type="text" value="" />
						<text>USDT</text>
					</view>
				</view>
				<view class="block two">
					<view class="label">价格</view>
					<view class="m_input">
						<input type="text" value="" />
						<text>USDT</text>
					</view>
				</view>
				<view class="blue_btn">平仓</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
import main from './main.js';
import Modal from '@/components/lkex-modal/index.vue';
import { uniIcon, uniPopup, uniLoadMore } from '@dcloudio/uni-ui';
import uniIcons from '@/components/uni-icon/uni-icon.vue';
import HMmessages from '@/components/HM-messages/HM-messages.vue';
import Coin from '@/components/coin-modal/index.vue';
import Goto from '@/components/nor-modal/index.vue';
import { mapGetters } from 'vuex';

export default {
	components: {
		uniIcon,
		uniIcons,
		uniPopup,
		HMmessages,
		Modal,
		uniLoadMore,
		Coin,
		Goto
	},
	computed: {
		...mapGetters(['COINRMB', 'USERINFO', 'AVOID', 'PAN', 'COINCONFIG'])
	},
	mixins: [main]
};
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
